       	<script type="text/javascript" src="datePicker/js/jscal2.js"></script>
	    <script type="text/javascript" src="datePicker/js/lang/fr.js"></script>
        <link rel="stylesheet" type="text/css" href="datePicker/css/jscal2.css" />
    	<link rel="stylesheet" type="text/css" href="datePicker/css/border-radius.css" />
<tbody>
	<h3>Les détails de votre commande :</h3>
 
 <form  method="post" action="Controller/CommandeServiceController.php?action=validation">
    <label for="calendar">Selectionnez la date désirée pour votre demande de prestation :</label>
    <input id="calendar" /><button type="button" id="calendar-trigger">Selectionner</button>

	<script>
        Calendar.setup({
            trigger    : "calendar-trigger",
            inputField : "calendar",
			showTime   : 12,
			onSelect   : function() { this.hide() },
			min: <?php echo date("Ymd");?>
        });
    </script>

    
    <!-- Feedback message zone -->
	<div id="message"></div>
<div id="tablecontent">
    	<table class="testgrid">
    	</table>
    </div>
    
<p id="total_ht"></p>
    
<p id="total_ttc"></p>

<fieldset><legend>Votre adresse de livraison :</legend>

<label for="adresse_livraison">Adresse :</label>
<?php if ( isset($userInfo['adresse_livraison']) ){
	echo '<input type="text" name="adresse_livraison" value="'.$userInfo['adresse_livraison'].'" />';	
	} else { ?>
	<input type="text" name="adresse_livraison" />

<label for="complement_livraison">Complément adresse :</label>
<?php  } if ( isset($userInfo['complement_livraison']) ){ 
	echo '<input type="text" name="complement_livraison" value="'.$userInfo['complement_livraison'].'" />';	
	} else { ?>
	<input type="text" name="complement_livraison" />
       
<label for="code_postal_livraison">Code postal :</label> 
<?php  } if ( isset($userInfo['code_postal_livraison']) ){ 
	echo '<input type="text" name="code_postal_livraison" value="'.$userInfo['code_postal_livraison'].'" />';	
	} else { ?>
	<input type="text" name="code_postal_livraison" />
    
<label for="commune_livraison">Commune :</label>
<?php  } if ( isset($userInfo['commune_livraison']) ){ 
	echo '<input type="text" name="commune_livraison" value="'.$userInfo['commune_livraison'].'" />';	
	} else { ?>
	<input type="text" name="commune_livraison" />
	<?php } ?>

</fieldset>

</form>
</tbody>

<script language="javascript" type="text/javascript" src="authent/login.js"></script>
<script src="../EditableGrid/editablegrid.js"></script>
		<!-- [DO NOT DEPLOY] --> <script src="../EditableGrid/editablegrid_renderers.js" ></script>
		<!-- [DO NOT DEPLOY] --> <script src="../EditableGrid/editablegrid_editors.js" ></script>
		<!-- [DO NOT DEPLOY] --> <script src="../EditableGrid/editablegrid_validators.js" ></script>
		<!-- [DO NOT DEPLOY] --> <script src="../EditableGrid/editablegrid_utils.js" ></script>
		<!-- [DO NOT DEPLOY] --> <script src="../EditableGrid/editablegrid_charts.js" ></script>

		<link rel="stylesheet" href="../EditableGrid/editablegrid.css" type="text/css" media="screen"> 
       
		<style>
			body { font-family:'lucida grande', tahoma, verdana, arial, sans-serif; font-size:11px; }
			h1 { font-size: 15px; }
			a { color: #548dc4; text-decoration: none; }
			a:hover { text-decoration: underline; }
			table.testgrid { border-collapse: collapse; border: 1px solid #CCB; width: 800px; }
			table.testgrid td, table.testgrid th { padding: 5px; border: 1px solid #E0E0E0; }
			table.testgrid th { background: #E5E5E5; text-align: left; }
			input.invalid { background: red; color: #FDFDFD; }
		</style>
               
		<script>
		// helper function to get path of a demo image
		function image(relativePath) {
			return "images/" + relativePath;
		}
		
		var metadata = [];
		var data = [];
	
		window.onload = function() {
		// this approach is interesting if you need to dynamically create data in Javascript 
		metadata.push({ name: "libelle_service", label: "Service", datatype: "string", editable: false});
		metadata.push({ name: "commentaire", label: "Description", datatype: "string", editable: false});
		metadata.push({ name: "quantite", label: "Nb commandé(s)", datatype: "integer", editable: true});
		metadata.push({ name: "prix_unitaire", label: "Prix Unitaire", datatype: "double(€,2)", editable: false});
		metadata.push({ name: "taux_tva", label: "Taux TVA", datatype: "double(%,2)", editable: false});
		metadata.push({ name: "total_ht", label: "Total HT", datatype: "double(€,2)", editable: false});
		metadata.push({ name: "total_ttc", label: "Total TTC", datatype: "double(€,2)", editable: false});
		metadata.push({ name: "com_client", label:"Vos commentaires", datatype: "string", editable: true});
		metadata.push({ name:"action", label:"", datatype:"html", bar:true, editable:false, values:null});
		
		
		<?php $i=1 ;
			$total_commande_ht=0;
			$total_commande_ttc=0; ?>
		   <?php foreach ( $commande as $ligne ) {
			   
			   $total_commande_ht += $ligne['prix_unitaire_HT']*$ligne['quantite'];
			   $total_commande_ttc += $ligne['prix_unitaire_HT']*$ligne['quantite']*$ligne['taux_tva']*0.01; ?>
			data.push({id: <?php echo $i ?>,
			 values: {"libelle_service": "<?php echo $ligne['libelle_service'] ?>",
			 "commentaire": "<?php echo $ligne['commentaire'] ?>",
			 "quantite": "<?php echo $ligne['quantite'] ?>",
			 "prix_unitaire": "<?php echo $ligne['prix_unitaire_HT'] ?>",
			 "taux_tva": "<?php echo $ligne['taux_tva'] ?>",
			 "total_ht": "<?php echo $ligne['prix_unitaire_HT']*$ligne['quantite'] ?>",
			 "total_ttc": "<?php echo $ligne['prix_unitaire_HT']*$ligne['quantite']*$ligne['taux_tva']*0.01 ?>",
			 "com_client": "<?php echo  $ligne['com_client'] ?>",

			 "action":""}});		
			 <?php $i=$i+1 ; ?>
   		<?php } ?>
		
		editableGrid = new EditableGrid("CommandeGrid", {
			
			saveOnBlur: false,
			tableLoaded: function() { 

				// display a message
				document.getElementById("message").innerHTML = "<p class='ok'>Ready!</p>";
				// render the grid
				this.renderGrid("tablecontent", "testgrid");
			
			},				
			// Function de modification d'une valeur 
			modelChanged: function(rowIdx, colIdx, oldValue, newValue, row) {
						
			columnName = this.getColumnName(colIdx);
			idUtilisateur = this.getValueAt(rowIdx, editableGrid.getColumnIndex("libelle_service"));
			document.getElementById("message").innerHTML = "<p class='ok'>Modification de : '"+ oldValue +"' par '" + newValue + "'</p>";
			
			if ( this.getColumnName(colIdx) == "quantite" )
			{
				var new_total_ht = newValue*editableGrid.getValueAt(rowIdx, editableGrid.getColumnIndex("prix_unitaire"));
				var new_total_ttc = new_total_ht*editableGrid.getValueAt(rowIdx, editableGrid.getColumnIndex("taux_tva"));
				this.setValueAt(rowIdx, editableGrid.getColumnIndex("total_ht"), new_total_ht );
				this.setValueAt(rowIdx, editableGrid.getColumnIndex("total_ttc"), new_total_ttc, editableGrid.renderGrid("tablecontent", "testgrid") );
				setTotal();	
			}
			// Appel à la modification du service
			}
		});
		
		
		
		editableGrid.load({"metadata": metadata, "data": data});							
		// CellRenderer pour suppression d'un valeur
		editableGrid.setCellRenderer("action", new CellRenderer({render: function(cell, value) {
			// this action will remove the row, so first find the ID of the row containing this cell 
			rowId = cell.rowIndex;
			idUtilisateur = editableGrid.getValueAt(rowId, editableGrid.getColumnIndex("libelle_service"));

			cell.innerHTML = "<a onclick=\"if (confirm('Etes vous sur de vouloir supprimer cette entreprise ? ')) { editableGrid.remove(" + cell.rowIndex + "); } \" style=\"cursor:pointer\">" +
			 "<img src=\"" + image("delete.png") + "\" border=\"0\" alt=\"supprimer\" title=\"Supprimer\"/></a>";
		}})); 
		
		setTotal();
		editableGrid.renderGrid("tablecontent", "testgrid");	
		}
		
		function setTotal(){
			var total_ht=0;
			var total_ttc=0;
			for ( var i=0; i < data.length ; i++){
				total_ht += editableGrid.getValueAt(i, editableGrid.getColumnIndex("total_ht"));
				total_ttc += editableGrid.getValueAt(i, editableGrid.getColumnIndex("total_ttc"));
			}
			alert("setTotal Called");
			document.getElementById("total_ht").innerHTML = "<strong>Montant total HT :" +total_ht + " €</strong>";
			document.getElementById("total_ttc").innerHTML = "<strong>Montant total TTC :" +total_ttc § " €</strong>";
		}
		
		function supprLigne(libelle_service){
			
		}
		
		function postData(page,data)
		{
			var form = document.createElement('form');
			form.setAttribute('action', page);
			form.setAttribute('method', 'post');
			for (var n in data)
			{
				var inputvar = document.createElement('input');
				inputvar.setAttribute('type', 'hidden');
				inputvar.setAttribute('name', n);
				inputvar.setAttribute('value', data[n]);
				form.appendChild(inputvar);
			}
			document.body.appendChild(form);
			form.submit();
		}
		
		function smodifLigne(libelle_service){
			
		}
	</script>
